<!--
 * @Description: 服务器监控
 * @Author: HuiSir<273250950@qq.com>
 * @Date: 2022-01-17 17:01:24
 * @LastEditTime: 2025-08-01 16:28:19
-->
<template>
  <el-row :gutter="10">
    <el-col :sm="12" :xs="24">
      <fy-box-card title="CPU">
        <el-descriptions :column="2" v-loading="loading">
          <el-descriptions-item
            v-for="item in cpuOptions"
            :key="item.key"
            :label="item.label"
          >
            {{ item.formatter ? item.formatter(cpuInfo) : cpuInfo[item.key] }}
          </el-descriptions-item>
        </el-descriptions>
      </fy-box-card>
    </el-col>
    <el-col :sm="12" :xs="24">
      <fy-box-card title="内存">
        <el-descriptions :column="2" v-loading="loading">
          <el-descriptions-item
            v-for="item in memOptions"
            :key="item.key"
            :label="item.label"
          >
            {{ item.formatter ? item.formatter(memInfo) : memInfo[item.key] }}
          </el-descriptions-item>
        </el-descriptions>
      </fy-box-card>
    </el-col>
  </el-row>
  <el-row :gutter="10">
    <el-col :span="24">
      <fy-box-card title="服务器信息">
        <el-descriptions :column="2" v-loading="loading">
          <el-descriptions-item
            v-for="item in sysOptions"
            :key="item.key"
            :label="item.label"
          >
            {{ item.formatter ? item.formatter(sysInfo) : sysInfo[item.key] }}
          </el-descriptions-item>
        </el-descriptions>
      </fy-box-card>
    </el-col>
  </el-row>
  <el-row :gutter="10">
    <el-col :span="24">
      <fy-box-card title="磁盘信息">
        <fy-table
          v-model:cols="diskOptions"
          :loading="loading"
          :data="diskInfo"
          :border="false"
        >
        </fy-table>
      </fy-box-card>
    </el-col>
  </el-row>
</template>

<script lang="ts" setup>
import { getServerInfo } from "@/api/monitor/index";
import useServerOptions from "./hooks/useServerOptions";
import { ref, Ref } from "vue";

// 配置项
defineOptions({ name: "ServerInfo" });

// loading
const loading = ref(false);
// 用户列表数据
const cpuInfo: Ref<Record<string, unknown>> = ref({});
const memInfo: Ref<Record<string, unknown>> = ref({});
const sysInfo: Ref<Record<string, unknown>> = ref({});
const diskInfo = ref([]);
// 详情配置
const { cpuOptions, memOptions, sysOptions, diskOptions } = useServerOptions();

// 请求服务器信息
(function getData() {
  loading.value = true;
  getServerInfo().then((res) => {
    const { ok, data } = res;
    if (ok) {
      cpuInfo.value = data.cpu;
      diskInfo.value = data.disk;
      memInfo.value = data.mem;
      sysInfo.value = data.sys;
    }
    loading.value = false;
  });
  return getData;
})();
</script>

<style scoped lang="scss">
.el-col {
  margin-bottom: 10px;
}
</style>
